<template>
  <el-dropdown :show-timeout="100" trigger="click">
    <el-button plain>
      Link
      <el-icon class="el-icon--right" style="vertical-align: middle;">
        <CaretBottom />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu class="no-padding no-border" style="width:400px">
        <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
          <el-input v-model="source_uri" placeholder="Please enter the content">
            <template #prepend>
              URL
            </template>
          </el-input>
        </el-form-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
export default {
  name: 'SourceUrl'
}
</script>

<script setup>
import { defineProps, computed, defineEmits } from 'vue'
import { CaretBottom } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:modelValue'])

const source_uri = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})
</script>

<style scoped>

</style>
